<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <div th:replace="common/common::html"></div>
  <meta charset="UTF-8">
  <title th:text="#{organ.info}">Title</title>
  <script th:inline="javascript">
    var _gridWidth;
    var _gridHeight;

    //页面自适应
    function resizePageSize() {
      _gridWidth = $(document).width() - 12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
      _gridHeight = $(document).height() - 32 - 60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
    }

    $(function () {
      resizePageSize();
      var _columnWidth = _gridWidth / 5;
      $("#flexigrid-id").flexigrid({
        width: _gridWidth,
        height: _gridHeight,
        url: /*[[@{select}]]*/"",
        dataType: 'json',
        colModel: [
          {
            display: 'organUuid',
            name: 'organUuid',
            width: 150,
            sortable: false,
            align: 'center',
            hide: 'true'
          },
          {
            display: /*[[#{organ.name}]]*/"",
            name: 'organName',
            width: _columnWidth,
            sortable: true,
            align: 'center'
          },
          {
            display: /*[[#{organ.modtime}]]*/"",
            name: 'modtime',
            width: _columnWidth,
            sortable: true,
            align: 'center'
          },
          {
            display: /*[[#{organ.description}]]*/"",
            name: 'description',
            width: _columnWidth,
            sortable: true,
            align: 'center'
          },
          {
            display: /*[[#{common.operation}]]*/"",
            name: 'organUuid',
            width: _columnWidth,
            sortable: true,
            align: 'center',
            process: function (v, _trid, _row) {
              var htmlContent = '<a href="#" onclick="deleteUser(\'' + v + '\')">' +
                  '<i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
              return htmlContent
            }
          }
        ],
        resizable: false, //resizable table是否可伸缩
        useRp: true,
        usepager: true, //是否分页
        autoload: false, //自动加载，即第一次发起ajax请求
        hideOnSubmit: true, //是否在回调时显示遮盖
        showcheckbox: true, //是否显示多选框
        //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
        rowbinddata: true
      });
      queryBtn();
      //添加
      $("#add-btn-id").click(function (event) {
        event.stopPropagation();
        $("#add-organ-dialog-id").dialog('open')
      })
      $("#add-organ-dialog-id").dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        title: /*[[#{organ.insert.tip.titile}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function () {
              var organName = document.getElementById("add-organ-name").value
              var description = document.getElementById("add-organ-description").value
              $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{insert}]]*/'',
                data: [{name: "organName", value: organName}, {
                  name: "description",
                  value: description
                }],
                success: function (data) {
                  message(data.msg);
                  $("#add-organ-dialog-id").dialog("close");
                  $("#flexigrid-id").flexReload();
                },
                error: function (msg) {
                  message(/*[[#{common.error}]]*/'');
                }
              });
            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function () {
              $(this).dialog("close");
            }
          },
        ]
      });

      $("#update-organ-dialog-id").dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        title: /*[[#{organ.update.tip.titile}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function () {
              var organUuid =$("#flexigrid-id").getFlexigridiAttrByIndex(0)
              var organName = document.getElementById("update-organ-name").value
              var description = document.getElementById("update-organ-description").value
              $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{update}]]*/'',
                data: [{name: "organUuid", value: organUuid},
                  {name: "organName", value: organName},
                  {name: "description", value: description}],
                success: function (data) {
                  message(data.msg);
                  $("#update-organ-dialog-id").dialog("close");
                  $("#flexigrid-id").flexReload();
                },
                error: function (msg) {
                  message(/*[[#{common.error}]]*/'');
                }
              });
            }
          }, {
            text: /*[[#{common.cancel}]]*/'',
            click: function () {
              $(this).dialog("close");
            }
          },
        ]
      });
      //删除
      $("#query-btn-id").click(function (event) {
        event.stopPropagation();
        queryBtn();
      })
      $("#confirm-user-del-id").dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        title: /*[[#{organ.delete.tip.titile}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function () {
              var organUuid = $("#confirm-user-del-id").attr("organUuid");
              $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{delete}]]*/'',
                data: [{name: "organUuid", value: organUuid}],
                success: function (data) {
                  message(data.msg);
                  $("#confirm-user-del-id").dialog("close");
                  queryBtn();
                },
                error: function (msg) {
                  message(/*[[#{common.error}]]*/'');
                }
              });
            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function () {
              $(this).dialog("close");
            }
          },
        ]
      });
      //绑定组织
      $("#allocate-btn-id").click(function (event) {
        event.stopPropagation()
        oAllocateZTree();
      });
      $("#allocate-dialog-id").dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        title: /*[[#{organ.menu.allocate}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function () {
              var organUuid = $("#allocate-dialog-id").attr("organUuid");
              var parentUuids = [];
              var ztreeObj = $.fn.zTree.getZTreeObj("allocate-organ-ztree");
              var nodes = ztreeObj.getCheckedNodes(true);
              $(nodes).each(function (index, item) {
                parentUuids.push(item.id);
              });
              $.ajax({
                    type: 'post',
                    async: false,
                    dataType: 'json',
                    url: /*[[@{updateById}]]*/'',
                    data: [
                      {name: "organUuid", value: organUuid},
                      {name: "parentUuids", value: parentUuids}
                    ],
                    success: function (data) {
                      message(data.msg);
                      $("#allocate-dialog-id").dialog('close');
                    },
                    error: function (msg) {
                      message(/*[[#{common.error}]]*/'');
                    }
                  }
              );
            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function () {
              $(this).dialog("close");
            }
          },
        ]
      });
    });//ready

    function queryBtn() {
      var organUuid = $("#confirm-user-del-id").val();
      $("#flexigrid-id").flexOptions({
        extParam: [
          {name: "organUuid", value: organUuid}
        ]
      }).flexReload();
    }

    function deleteUser(organUuid) {
      $("#confirm-user-del-id").attr("organUuid", organUuid);
      $("#confirm-user-del-id").dialog('open');
    }

    var allocateSetting = {
      check: {
        enable: true
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };

    function oAllocateZTree() {
      var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
      if (ids.length !== 1) {
        message(/*[[#{common.select.one}]]*/'');
        return;
      }
      $("#allocate-dialog-id").attr("organUuid", ids);
      $.ajax({
            type: 'post',
            async: false,
            dataType: 'json',
            url: /*[[@{ListById}]]*/'',
            data: [{name: "organUuid", value: ids}],
            success: function (data) {
              $.fn.zTree.init($("#allocate-organ-ztree"), allocateSetting, data);
              $("#allocate-dialog-id").dialog('open');
            },
            error: function (msg) {
              message(/*[[#{common.error}]]*/'');
            }
          }
      );
    }
    // 修改组织
    function updateBtn() {
      var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
      if (ids.length !== 1) {
        message(/*[[#{common.select.one}]]*/'');
        return;
      }
      $("#update-organ-dialog-id").dialog('open');
    }
  </script>
</head>
<body>
<div>
  <!--添加-->
  <a href="#" id="add-btn-id" class="navbar-btn">
    <i class="glyphicon glyphicon-credit-card"></i>
    <span th:text="#{common.add}"></span>
  </a>
  <!--修改-->
  <a class="btn" href="#" onclick="updateBtn();">
    <i class="glyphicon glyphicon-edit"></i>
    <span th:text="#{common.modify}"></span>
  </a>
  <!--绑定组织机构-->
  <a href="#" id="allocate-btn-id" class="navbar-btn">
    <i class="glyphicon glyphicon-tower"></i>
    <span th:text="#{common.bound}"></span>
  </a>
</div>

<table id="flexigrid-id"></table>
<div id="confirm-user-del-id" style="display: none">
  <span th:text="#{organ.delete.tip.info}"></span>
</div>
<!--添加对话框-->
<div id="add-organ-dialog-id" style="display: none">
  <form id="add-organ-from-id" th:action="@{insert}" method="post">
    <div class="from-group">
      <span th:text="#{organ.name}"></span>
      <input type="text" id="add-organ-name" autocomplete="off" name="organName" th:placeholder="#{organ.name}">
    </div>
    <div class="from-group">
      <span th:text="#{organ.description}"></span>
      <input type="text" id="add-organ-description" autocomplete="off" name="description"
             th:placeholder="#{organ.description}">
    </div>
  </form>
</div>
<!--修改对话框-->
<div id="update-organ-dialog-id" style="display: none">
  <form id="update-organ-from-id" th:action="@{update}" method="post">
    <div class="from-group">
      <span th:text="#{organ.name}"></span>
      <input type="text" id="update-organ-name" autocomplete="off" name="organName"
             th:placeholder="#{organ.name}">
    </div>
    <div class="from-group">
      <span th:text="#{organ.description}"></span>
      <input type="text" id="update-organ-description" autocomplete="off" name="description"
             th:placeholder="#{organ.description}">
    </div>
  </form>
</div>
<!--绑定组织信息-->
<div id="allocate-dialog-id" style="display: none">
  <ul id="allocate-organ-ztree" class="ztree">
  </ul>
</div>
</body>
</html>
